<template>
  <div class="settledPage">
    <div class="settled_banner" style="margin: 0 auto">
      <img alt="" src="./images/banner.png" />
    </div>
    <div class="settled_content">
      <!-- 个人入驻 -->
      <div class="content_item">
        <img alt="" src="./images/个人商家icon.png" />
        <p class="title">个人商家</p>
        <p class="tit">个人身份证正反面照片</p>
        <p class="tit">实名认证的银行卡信息</p>
        <el-button class="el_btn" @click="goCompany(1)">立即入驻</el-button>
      </div>
      <!-- 商家入驻 -->
      <div class="content_item">
        <img alt="" src="./images/企业商家icon.png" />
        <p class="title">企业商家</p>
        <p class="tit">个人身份证正反面照片</p>
        <p class="tit">实名认证的银行卡信息</p>
        <p class="tit">营业执照、税务登记证</p>
        <el-button class="el_btn" @click="goCompany(2)">立即入驻</el-button>
      </div>
    </div>

    <!-- 抽屉 -->
    <el-drawer
      :before-close="handleClose"
      :show-close="false"
      :visible.sync="drawer"
      class="drawer_one"
      size="36%"
    >
      <template slot="title"
      ><i
        class="el-icon-arrow-left"
        style="font-size: 14px; color: #000; cursor: pointer"
        @click="handleClose"
      >返回主页</i
      ></template
      >

      <div class="one_content">
        <div class="one_icon">
          <img :src="img" alt="" />
          <p class="title">{{ title }}</p>
        </div>
        <!-- 表单 -->
        <div class="form">
          <el-form
            ref="form"
            label-position="right"
            label-width="220px"
            :model="formData"
            :rules="rules"
          >
            <!--<el-form-item label="会员名:"></el-form-item>-->
            <el-form-item label="店主姓名:" prop="mallInfoRequest.shopkeeper">
              <el-input
                v-model="formData.mallInfoRequest.shopkeeper"
                style="width: 300px"
                placeholder="请输入店主姓名"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              class="mt"
              label="联系电话:"
              prop="mallInfoRequest.phone"
            >
              <el-input
                v-model="formData.mallInfoRequest.phone"
                style="width: 300px"
                placeholder="请输入电话"
                clearable
              ></el-input>
            </el-form-item>
            <!--身份证号-->
            <el-form-item
              class="mt"
              label="身份证号:"
              prop="mallInfoRequest.idCard"
            >
              <el-input
                v-model="formData.mallInfoRequest.idCard"
                style="width: 300px"
                placeholder="请输入身份证号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              class="mt"
              label="负责人生日:"
              prop="mallInfoRequest.birthday"
            >
              <el-date-picker
                style="width: 300px"
                v-model="formData.mallInfoRequest.birthday"
                type="date"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择生日时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item class="mt" label="性别:" prop="gender">
              <!--性别-->
              <el-radio-group v-model="formData.mallInfoRequest.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="店铺名称" prop="mallInfoRequest.mallName">
              <el-input
                v-model="formData.mallInfoRequest.mallName"
                style="width: 300px"
                placeholder="请输入店铺名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item
              class="mt"
              label="结算周期"
              prop="mallInfoRequest.billingPeriod"
            >
              <el-select
                v-model="formData.mallInfoRequest.billingPeriod"
                style="width: 300px"
                clearable
                placeholder="请选择结算周期"
              >
                <el-option label="周结" value="1"></el-option>
                <el-option label="半月结" value="2"></el-option>
                <el-option label="月结" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="mt"
              label="店铺标签:"
              prop="mallInfoRequest.tag"
            >
              <!-- 选择框-->
              <el-select
                v-model="formData.mallInfoRequest.tag"
                style="width: 300px"
                placeholder="请选择店铺标签"
              >
                <el-option label="美食" value="1"></el-option>
                <el-option label="服饰" value="2"></el-option>
                <el-option label="数码" value="3"></el-option>
                <el-option label="家居" value="4"></el-option>
                <el-option label="美妆" value="5"></el-option>
                <el-option label="母婴" value="6"></el-option>
                <el-option label="运动" value="7"></el-option>
                <el-option label="其他" value="8"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="mt"
              label="商品分类:"
              prop="mallInfoRequest.goodsCategoryId"
            >
              <el-select
                v-model="formData.mallInfoRequest.goodsCategoryId"
                style="width: 300px"
                clearable
                placeholder="请选择商品分类"
              >
                <el-option
                  v-for="item in categoryList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="mt"
              label="税务登记号:"
              prop="mallInfoRequest.tax"
            >
              <el-input
                style="width: 300px"
                v-model="formData.mallInfoRequest.tax"
                clearable
                placeholder="请输入税务登记号"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="mt"
              label="开户银行:"
              prop="bankInfoRequest.bankName"
            >
              <el-input
                v-model="formData.bankInfoRequest.bankName"
                style="width: 300px"
                clearable
                placeholder="开户银行"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="mt"
              label="分行名称:"
              prop="bankInfoRequest.branchBank"
            >
              <el-input
                v-model="formData.bankInfoRequest.branchBank"
                style="width: 300px"
                clearable
                placeholder="请输入分行名称"
              ></el-input>
            </el-form-item>
            <!--开户账号-->
            <el-form-item
              class="mt"
              label="收款账号:"
              prop="bankInfoRequest.bankNo"
            >
              <el-input
                v-model="formData.bankInfoRequest.bankNo"
                style="width: 300px"
                clearable
                placeholder="请输入收款账号"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="mt"
              label="开户人姓名:"
              prop="bankInfoRequest.bankUserName"
            >
              <el-input
                v-model="formData.bankInfoRequest.bankUserName"
                style="width: 300px"
                clearable
                placeholder="请输入开户人姓名"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="mt"
              label="银行地址:"
              prop="bankInfoRequest.bankAddress"
            >
              <el-input
                v-model="formData.bankInfoRequest.bankAddress"
                style="width: 300px"
                clearable
                placeholder="请输入银行地址"
              ></el-input>
            </el-form-item>

            <el-form-item
              class="mt"
              label="持卡人手机号:"
              prop="bankInfoRequest.bankUserPhone"
            >
              <el-input
                v-model="formData.bankInfoRequest.bankUserPhone"
                style="width: 300px"
                clearable
                placeholder="请输入持卡人手机号"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="mt"
              label="持卡人身份证号:"
              prop="bankInfoRequest.bankUserCard"
            >
              <el-input
                v-model="formData.bankInfoRequest.bankUserCard"
                style="width: 300px"
                clearable
                placeholder="请输入持卡人身份证号"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button class="el_button" @click="handleNext">下一步</el-button>
        </div>

        <TwoDrawer
          :data="formData"
          :isShow="isShow"
          :src="img"
          :title="title"
          @handleLast="handleLast"
        ></TwoDrawer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import TwoDrawer from './twoDrawer' // eslint-disable-next-line import/no-cycle
import { listFistCate } from '@/api/mallApi/goods'

export default {
  name: 'SettledPage',
  /* 注册组件 */
  components: {
    TwoDrawer
  },

  /* 数据 */
  data() {
    return {
      isShow: false,
      drawer: false,
      formData: {
        mallInfoRequest: {
          // 会员名
          account: '',
          // 店主姓名
          shopkeeper: '',
          phone: '',
          birthday: '',
          gender: 0,
          mallName: '',
          // 结算周期
          billingPeriod: '',
          // 店铺标签
          tag: '',
          // 商品分类
          goodsCategoryId: '',
          // 税务登记号:
          tax: '',
          image: '',
          idCard: '',
          type: ''
        },
        // 银行
        bankInfoRequest: {
          bankName: '',
          bankUserName: '',
          bankNo: '',
          branchBank: '',
          bankAddress: '',
          bankUserPhone: '',
          bankUserCard: '',
          payType: '1'
        }
      },
      rules: {
        mallInfoRequest: {
          shopkeeper: [
            { required: true, message: '请输入店主姓名', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
          ],
          idCard: [
            { required: true, message: '请输入身份证号', trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '请选择负责人生日', trigger: 'change' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          mallName: [
            { required: true, message: '请输入店铺名称', trigger: 'blur' }
          ],
          billingPeriod: [
            { required: true, message: '请选择结算周期', trigger: 'change' }
          ],
          tag: [
            { required: true, message: '请选择店铺标签', trigger: 'change' }
          ],
          goodsCategoryId: [
            { required: true, message: '请选择商品分类', trigger: 'change' }
          ],
          tax: [
            { required: true, message: '请输入税务登记号', trigger: 'blur' }
          ]
        },
        bankInfoRequest: {
          bankName: [
            { required: true, message: '请输入银行名称', trigger: 'blur' }
          ],
          bankUserName: [
            { required: true, message: '请输入持卡人姓名', trigger: 'blur' }
          ],
          bankNo: [
            { required: true, message: '请输入开户账号', trigger: 'blur' }
          ],
          bankAddress: [
            { required: true, message: '请输入银行地址', trigger: 'blur' }
          ],
          bankUserPhone: [
            { required: true, message: '请输入持卡人手机号', trigger: 'blur' }
          ],
          bankUserCard: [
            {
              required: true,
              message: '请输入持卡人身份证号',
              trigger: 'blur'
            }
          ],
          branchBank: [
            { required: true, message: '请输入分行名称', trigger: 'blur' }
          ]
        }
      },
      img: '',
      title: '',
      type: 0,
      // 分类列表
      categoryList: []
    }
  },

  /* 计算属性 */
  computed: {},

  /* 监听器 */
  watch: {},

  /* 初始化阶段 */
  created() {
    listFistCate().then((res) => {
      if (res.code === '00000') {
        this.categoryList = res.data
        // 生成一个只有 key和value 的数组
        this.categoryList = res.data.map((item) => {
          return {
            key: item.id,
            value: item.categoryName
          }
        })
      }
    })
  },

  /* 挂载阶段 */
  mounted() {},

  /* 方法 */
  methods: {
    goCompany(val) {
      if (val === 1) {
        this.img = require('./images/个人商家icon.png')
        this.title = '个人商家'
        this.type = val
      } else {
        this.img = require('./images/企业商家icon.png')
        this.title = '企业商家'
        this.type = val
      }
      this.formData.mallInfoRequest.type = this.type
      this.drawer = true
    },
    handleClose(done) {
      done()
      // this.$confirm('确认关闭？')
      //   .then((_) => {
      //     done()
      //   })
      //   .catch((_) => {})
    },
    // 触发事件
    // handleEvent(type, val) {
    //   switch (type) {
    //     case 'checkbox':
    //       console.log(`handleEvent事件监听${type}：`, val, type)
    //       break
    //   }
    // },
    // 提交form表单
    handleNext() {
      // 验证表单
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isShow = true
        }
      })
    },
    // 上一步
    handleLast(value) {
      this.isShow = !value
    }
  }
}
</script>

<style lang="scss" scoped>
.settledPage {
  margin: 0 auto;
  width: 100%;
  //text-align: center;

  .settled_banner {
    width: 100%;
    height: 460px;
    background: transparent;
    margin: 0 auto;
  }

  .settled_content {
    width: 1240px;
    display: flex;
    margin: 30px auto 100px;
    justify-content: space-between;

    .content_item {
      * {
        margin: 0;
        padding: 0;
      }

      width: 597px;
      height: 326px;
      border-radius: 8px;
      background: #f7faff;
      border: 1px solid #e0ebfd;
      text-align: center;

      img {
        width: 60px;
        height: 60px;
        background: transparent;
        margin-top: 31px;
      }

      .title {
        font-weight: 700;
        font-size: 28px;
        color: #000;
      }

      .tit {
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        color: #626262;
      }

      .tit:nth-child(1) {
        margin-top: 7px;
      }

      .el_btn {
        width: 130px;
        height: 45px;
        border-radius: 22.5px;
        background: #1289ff;
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        margin-top: 66px;
      }
    }
  }

  .drawer_one {
    * {
      margin: 0;
      padding: 0;
    }

    .one_content {
      .one_icon {
        text-align: center;
        margin-top: 20px;
      }

      p {
        font-weight: 700;
        font-size: 28px;
        color: #000;
      }
    }

    .form {
      margin-top: 20px;

      .el_button {
        margin-left: 260px;
        width: 130px;
        height: 45px;
        border-radius: 22.5px;
        background: #1289ff;
        font-weight: 400;
        font-size: 20px;
        color: #fff;
        margin-top: 20px;
      }

      .mt {
        margin-top: 20px;
      }
    }
  }
}
</style>
